<!DOCTYPE html>
<html  lang="zh">
<head>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 4.0.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>Texlive+VSCode+LaTeX workshop+SumatraPDF - 吕东旭</title>


    <meta name="description" content="这篇博客主要是整理在VSCode配置latex环境的配置步骤，方便大家学习和配置。">
<meta name="keywords" content="VSCode相关环境配置">
<meta property="og:type" content="article">
<meta property="og:title" content="Texlive+VSCode+LaTeX workshop+SumatraPDF">
<meta property="og:url" content="https:&#x2F;&#x2F;lvdongxu.gitee.io&#x2F;blog&#x2F;2020&#x2F;01&#x2F;22&#x2F;texlive-vscode-latex-workshop-sumatrapdf&#x2F;index.html">
<meta property="og:site_name" content="吕东旭">
<meta property="og:description" content="这篇博客主要是整理在VSCode配置latex环境的配置步骤，方便大家学习和配置。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https:&#x2F;&#x2F;lvdongxu.gitee.io&#x2F;blog&#x2F;blog&#x2F;gallery&#x2F;background&#x2F;Slide&#x2F;GreatWall.jpg">
<meta property="og:updated_time" content="2020-02-04T08:07:43.516Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https:&#x2F;&#x2F;lvdongxu.gitee.io&#x2F;blog&#x2F;blog&#x2F;gallery&#x2F;background&#x2F;Slide&#x2F;GreatWall.jpg">







<link rel="icon" href="/blog/images/sjtu.svg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    <link rel="stylesheet" href="/blog/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    


<link rel="stylesheet" href="/blog/css/style.css">
<link rel="stylesheet" href="/blog/css/prism-tomorrow.css" type="text/css"></head>
<body class="is-2-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/blog/">
            
                <img src="/blog/images/logo.svg" alt="Texlive+VSCode+LaTeX workshop+SumatraPDF" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/blog/">Home</a>
                
                <a class="navbar-item"
                href="/blog/archives">归档</a>
                
                <a class="navbar-item"
                href="/blog/categories">分类</a>
                
                <a class="navbar-item"
                href="/blog/tags">标签</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    <a class="navbar-item" target="_blank" title="Download on GitHub" href="https://github.com/lvdongxu/hexo-theme-icarus">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;" target="_blank" rel="noopener">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;" target="_blank" rel="noopener">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-6-tablet is-9-desktop is-9-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-image">
        <span  class="image is-7by1">
            <img class="thumbnail" src="/blog/gallery/background/Slide/GreatWall.jpg" alt="Texlive+VSCode+LaTeX workshop+SumatraPDF">
        </span>
    </div>
    
    <div class="card-content article ">
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                <i class="fas fa-angle-double-right"></i>Texlive+VSCode+LaTeX workshop+SumatraPDF
            
        </h1>
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <!-- <time class="level-item has-text-grey" datetime="2020-01-22T00:56:08.000Z">2020-01-22</time> -->
                <time class="level-item has-text-grey" datetime="2020-01-22T00:56:08.000Z"><i class="far fa-calendar-alt">&nbsp;</i>2020-01-22</time>
                
                <time class="level-item has-text-grey is-hidden-mobile" datetime="2020-02-04T08:07:43.516Z"><i class="far fa-calendar-check">&nbsp;</i>2020-02-04</time>
                
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/blog/categories/%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/">环境配置</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    11 分钟 读完 (大约 1576 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    <span id="busuanzi_value_page_pv">0</span>次访问
                </span>
                
            </div>
        </div>
        
        <!-- <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                Texlive+VSCode+LaTeX workshop+SumatraPDF
            
        </h1> -->
        <div class="content">
            <p>这篇博客主要是整理在VSCode配置latex环境的配置步骤，方便大家学习和配置。</p>
<a id="more"></a>

<h1 id="一、前言"><a href="#一、前言" class="headerlink" title="一、前言"></a>一、前言</h1><p>其实我之前的$\LaTeX$写作环境是OverLeaf，这主要是因为本地配环境费劲而且自己配过texstudio之后发现界面丑的一笔，实在是不想委屈自己在这样的编辑器上面写论文，效果见下图：</p>
<p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/texstudio.jpg" alt></p>
<p>![](/Texlive-VSCode-LaTeX-workshop-SumatraPDF/texstudio.jpg</p>
<p>丑爆+10086，而且臃肿不堪。</p>
<p>读知乎的时候看到一个大佬聊在VSCode上写$\LaTeX$，我心动了，因为VSCode是我的主力编辑器，用于完美的开源社区和插件环境，无敌！！！这样我就找到了配环境的新方`向：</p>
<p><strong>VSCode + TexLive + Latex workshop(VSCode插件) + SumatraPDF(用于PDF编译预览)</strong></p>
<p>下面就让我来介绍一下我配置环境的全过程，借鉴了知乎大牛的文章，文章链接如下:</p>
<p><a href="https://zhuanlan.zhihu.com/p/38178015" target="_blank" rel="noopener">使用VSCode编写LaTeX</a> - Marvey</p>
<p>本章配置环境唯一前提：<strong>你已安装VSCode并且掌握基本的VSCode配置文件书写规则</strong>。</p>
<h1 id="二、TexLive下载安装"><a href="#二、TexLive下载安装" class="headerlink" title="二、TexLive下载安装"></a>二、TexLive下载安装</h1><p>官网下载缓慢，而且下载链接找的也很费劲，所以还不如直接上<a href="https://mirrors.tuna.tsinghua.edu.cn/CTAN/systems/texlive/Images/" target="_blank" rel="noopener">清华镜像站</a>下载，这属实要快很多。</p>
<p>下载下来以管理员身份打开<em>install-tl-windows.bat</em>来安装就可以了，一路 <strong>下一步</strong> 就完全可以了，当然如果可以的话，你也可以在 <strong>Advanced -&gt; Customize</strong> 中选择自己就需要的语言包，一些你这辈子都不会用到的语言包比如什么日文韩文之类的倒是可以勾掉。但是我安装的时候选择所有的包都安装，因为我还是新手菜鸟。</p>
<p>安装好了之后在命令行里测试一下自己的TeX是否真的安装成功了：</p>
<p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/texcmder.jpg" alt></p>
<h1 id="三、VSCode插件-LaTeX-Workshop配置"><a href="#三、VSCode插件-LaTeX-Workshop配置" class="headerlink" title="三、VSCode插件 - LaTeX Workshop配置"></a>三、VSCode插件 - LaTeX Workshop配置</h1><h2 id="1-安装-LaTeX-Workshop插件"><a href="#1-安装-LaTeX-Workshop插件" class="headerlink" title="1. 安装 LaTeX Workshop插件"></a>1. 安装 LaTeX Workshop插件</h2><p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/latexworkshop.jpg" alt></p>
<p>上面的图展示的就是VSCode里面最实用的$\LaTeX$插件，极为好用，几乎囊括了所有的功能，安装好的基本大功告成，就会有代码高亮咯……但是显然没有彻底结束，还有很多的配置呢……</p>
<h2 id="2-配置编译工具和编译命令"><a href="#2-配置编译工具和编译命令" class="headerlink" title="2. 配置编译工具和编译命令"></a>2. 配置编译工具和编译命令</h2><p>其实VSCode的主要作用也是复杂命令与简单的图形化界面相结合的结果，所以在一开始使用的时候需要自己老老实实配环境。</p>
<p>这里的基本步骤便是将相对应的编译工具与命令在配置区里面写好，通用配置可以见下面：</p>
<figure class="highlight hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 编译工具及命令配置</span></span><br><span class="line">        "latex-workshop.latex.tools": [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="hljs-comment">// 编译工具和命令</span></span><br><span class="line">                <span class="hljs-attr">"name"</span>: <span class="hljs-string">"xelatex"</span>,</span><br><span class="line">                <span class="hljs-attr">"command"</span>: <span class="hljs-string">"xelatex"</span>,</span><br><span class="line">                <span class="hljs-attr">"args"</span>: [</span><br><span class="line">                    <span class="hljs-string">"-synctex=1"</span>,</span><br><span class="line">                    <span class="hljs-string">"-interaction=nonstopmode"</span>,</span><br><span class="line">                    <span class="hljs-string">"-file-line-error"</span>,</span><br><span class="line">                    <span class="hljs-string">"-pdf"</span>,</span><br><span class="line">                    <span class="hljs-string">"%DOCFILE%"</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="hljs-attr">"name"</span>: <span class="hljs-string">"pdflatex"</span>,</span><br><span class="line">                <span class="hljs-attr">"command"</span>: <span class="hljs-string">"pdflatex"</span>,</span><br><span class="line">                <span class="hljs-attr">"args"</span>: [</span><br><span class="line">                    <span class="hljs-string">"-synctex=1"</span>,</span><br><span class="line">                    <span class="hljs-string">"-interaction=nonstopmode"</span>,</span><br><span class="line">                    <span class="hljs-string">"-file-line-error"</span>,</span><br><span class="line">                    <span class="hljs-string">"%DOCFILE%"</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="hljs-attr">"name"</span>: <span class="hljs-string">"bibtex"</span>,</span><br><span class="line">                <span class="hljs-attr">"command"</span>: <span class="hljs-string">"bibtex"</span>,</span><br><span class="line">                <span class="hljs-attr">"args"</span>: [</span><br><span class="line">                    <span class="hljs-string">"%DOCFILE%"</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br></pre></td></tr></table></figure>

<p>基本的编译工具配好了，就需要配置一下自己的编译链，默认编译链是XeLaTeX，当然也可以配置自己的编译链，我的编译链配置是这样的：</p>
<figure class="highlight hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 编译链配置</span></span><br><span class="line">        "latex-workshop.latex.recipes": [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="hljs-attr">"name"</span>: <span class="hljs-string">"xelatex"</span>,</span><br><span class="line">                <span class="hljs-attr">"tools"</span>: [</span><br><span class="line">                    <span class="hljs-string">"xelatex"</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="hljs-attr">"name"</span>: <span class="hljs-string">"xe-&gt;bib-&gt;xe-&gt;xe"</span>,</span><br><span class="line">                <span class="hljs-attr">"tools"</span>: [</span><br><span class="line">                    <span class="hljs-string">"xelatex"</span>,</span><br><span class="line">                    <span class="hljs-string">"bibtex"</span>,</span><br><span class="line">                    <span class="hljs-string">"xelatex"</span>,</span><br><span class="line">                    <span class="hljs-string">"xelatex"</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br></pre></td></tr></table></figure>

<p><strong>设置第二个编译链的主要原因如下</strong>：<a href="https://blog.csdn.net/jianghao_ava/article/details/89578348" target="_blank" rel="noopener">原文链接</a></p>
<p>编译分4步：</p>
<ol>
<li>latex xx.tex  编译tex文件，没错误的话会生成aux文件，aux文件包含了引用这些的信息。</li>
<li>bibtex xx.aux 根据aux文件中记录的信息来检测bib文件中的相关文献，此时也会检测bib中相关的书写有无错误。</li>
<li>latex  xx.tex 再次编译，把参考文献编译进文档中。</li>
<li>latex  xx.tex 三次编译，把交叉引用编译正确。</li>
</ol>
<p>这样基本就可以完成了。</p>
<p>接下来可以实验一下编译效果，编译内容如下：</p>
<p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/firstcompile.jpg" alt></p>
<p>编译效果如下：</p>
<p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/firstcompileres.jpg" alt></p>
<p>当然，如果想要用pdflatex，就需要在tex文档首加一行这样的代码：</p>
<figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">%!TEX program = pdflatex</span><br></pre></td></tr></table></figure>

<h2 id="3-配置SumatraPDF作为预览工具"><a href="#3-配置SumatraPDF作为预览工具" class="headerlink" title="3. 配置SumatraPDF作为预览工具"></a>3. 配置SumatraPDF作为预览工具</h2><p>首先下载SumatraPDF，这个比较简单就不做赘述了。</p>
<p>其次，下载完成后需要在VSCode的进行基本的配置：</p>
<figure class="highlight hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 外联sumatrapdf用于预览</span></span><br><span class="line">"latex-workshop.view.pdf.viewer": "external",</span><br><span class="line">"latex-workshop.view.pdf.external.command": &#123;</span><br><span class="line">    "command": "E:/sumatrapdf/SumatraPDF.exe",</span><br><span class="line">    "args": [</span><br><span class="line">             <span class="hljs-string">"%PDF%"</span></span><br><span class="line">            ]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>然后我们就可以用SumatraPDF来预览了，预览图如下：</p>
<p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/sumatrapdf.jpg" alt></p>
<h2 id="4-配置正向搜索"><a href="#4-配置正向搜索" class="headerlink" title="4. 配置正向搜索"></a>4. 配置正向搜索</h2><p>正向搜索的主要目的在于，我们在tex文件源码中点击，就可以在pdf定位该位置在哪一行。</p>
<p>在配置文件里面如下配置即可：</p>
<figure class="highlight hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 正向搜索</span></span><br><span class="line">"latex-workshop.showContextMenu":true,</span><br><span class="line">"latex-workshop.view.pdf.external.synctex": &#123;</span><br><span class="line">    "command": "E:/sumatrapdf/SumatraPDF.exe",</span><br><span class="line">    "args": [</span><br><span class="line">        "-forward-search",</span><br><span class="line">        "%TEX%",</span><br><span class="line">        "%LINE%",</span><br><span class="line">        <span class="hljs-string">"%PDF%"</span></span><br><span class="line">    ]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>大致效果如下，我确认的一行是在tex文件里面的地13行，也就是被标注出来的一行：</p>
<p><img src="/blog/img/Texlive-VSCode-LaTeX-workshop-SumatraPDF/forwardsearch.jpg" alt></p>
<p>在左边栏点击 <strong>SyncTex from cursor</strong> ，就会在SumatraPDF里面显示第二行被标注出来，这就是前向搜索的效果。</p>
<h2 id="5-配置反向搜索"><a href="#5-配置反向搜索" class="headerlink" title="5. 配置反向搜索"></a>5. 配置反向搜索</h2><p>反向搜索的配置主要是在SumatraPDF中进行配置，这个PDF浏览器带了这个功能。</p>
<p>点击SumatraPDF的 <strong>设置-&gt;高级选项</strong> 会出现一个txt的配置文件，在最后一行需要添加这样一行配置，保证反向搜索功能添加：</p>
<figure class="highlight hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">InverseSearchCmdLine = "E:\VScode\Microsoft VS Code\Code.exe" "E:\VScode\Microsoft VS Code\resources\app\out\cli.js" -g "%f:%l"</span><br></pre></td></tr></table></figure>

<p>第一个引号内是VSCode的.exe文件所在目录，第二个引号是cli.js所在目录，后面都不需要改。这样配置完就搞定了。</p>
<p><strong>基本效果就是在PDF内双击一行的任意位置，在tex源码内光标就会移动到对应行的行首。</strong></p>

        </div>
        
        <div>
            <ul class="post-copyright">
            <li><strong>本文标题：</strong><a href="/blog/2020/01/22/texlive-vscode-latex-workshop-sumatrapdf/">Texlive+VSCode+LaTeX workshop+SumatraPDF</a></li>
            <li><strong>本文作者：</strong><a href="https://lvdongxu.github.io" target="_blank" rel="noopener">吕东旭</a></li>
            <li><strong>本文链接：</strong><a href="/blog/2020/01/22/texlive-vscode-latex-workshop-sumatrapdf/">https://lvdongxu.github.io/2020/01/22/texlive-vscode-latex-workshop-sumatrapdf/</a></li> <!-- 这里替换成你自己的网址-->
            <li><strong>发布时间：</strong>2020-01-22</li>
            <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li>
            </ul>
        </div><br>
        
        
        <hr style="height:1px;margin:1rem 0"/>
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <!-- <span class="is-size-6 has-text-grey has-mr-7">#</span> -->
                    <i class="fas fa-tags has-text-grey"></i>&nbsp;
                    <a class="has-link-grey -link" href="/blog/tags/VSCode%E7%9B%B8%E5%85%B3%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/" rel="tag">VSCode相关环境配置</a>
                </div>
            </div>
        </div>
        
        
        
    </div>
</div>





<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/blog/2020/01/21/hello-world/">
                <span class="level-item">Hello World</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                
    
    
    
    
    <div class="column is-4-tablet is-3-desktop is-3-widescreen  has-order-1 column-left is-sticky">
        
            
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="" src="/blog/images/sjtu.png" alt="吕东旭">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        吕东旭
                    </p>
                    
                    
                    <p class="is-size-6 is-block">
                        Hardware engineer
                    </p>
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>上海交通大学闵行校区</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/blog/archives">
                        <p class="title has-text-weight-normal">
                            4
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/blog/categories">
                        <p class="title has-text-weight-normal">
                            3
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/blog/tags">
                        <p class="title has-text-weight-normal">
                            4
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/lvdongxu" target="_blank">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank"
                title="Github" href="https://github.com/lvdongxu">
                
                <i class="fab fa-github"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
        
            

    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#一、前言">
        <!-- <span class="has-mr-6">1</span> -->
        <span>一、前言</span>
        </a></li><li>
        <a class="is-flex" href="#二、TexLive下载安装">
        <!-- <span class="has-mr-6">2</span> -->
        <span>二、TexLive下载安装</span>
        </a></li><li>
        <a class="is-flex" href="#三、VSCode插件-LaTeX-Workshop配置">
        <!-- <span class="has-mr-6">3</span> -->
        <span>三、VSCode插件 - LaTeX Workshop配置</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-安装-LaTeX-Workshop插件">
        <!-- <span class="has-mr-6">3.1</span> -->
        <span>1. 安装 LaTeX Workshop插件</span>
        </a></li><li>
        <a class="is-flex" href="#2-配置编译工具和编译命令">
        <!-- <span class="has-mr-6">3.2</span> -->
        <span>2. 配置编译工具和编译命令</span>
        </a></li><li>
        <a class="is-flex" href="#3-配置SumatraPDF作为预览工具">
        <!-- <span class="has-mr-6">3.3</span> -->
        <span>3. 配置SumatraPDF作为预览工具</span>
        </a></li><li>
        <a class="is-flex" href="#4-配置正向搜索">
        <!-- <span class="has-mr-6">3.4</span> -->
        <span>4. 配置正向搜索</span>
        </a></li><li>
        <a class="is-flex" href="#5-配置反向搜索">
        <!-- <span class="has-mr-6">3.5</span> -->
        <span>5. 配置反向搜索</span>
        </a></li></ul></li></ul>
            </div>
        </div>
    </div>

        
        
            <!-- <div class="column-right-shadow is-hidden-widescreen is-sticky"> -->
            <div class="column-right-shadow  is-sticky">
            
            </div>
        
    </div>

                
            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <span id="busuanzi_container_site_pv" class="theme-info">
                |  本站总访问量<span id="busuanzi_value_site_pv">次
            </span>
            <span id="busuanzi_container_site_uv" class="theme-info">
                |  本站访客数<span id="busuanzi_value_site_uv">人次
            </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="level-start has-text-centered-mobile">
                <a class="footer-logo is-block has-mb-6" href="/blog/">
                
                    <img src="/blog/images/logo.svg" alt="Texlive+VSCode+LaTeX workshop+SumatraPDF" height="28">
                
                </a>
                <p class="is-size-7">
                &copy; 2020 吕东旭&nbsp;
                Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a>
                
                <br>
                <span id="busuanzi_container_site_uv">
                共<span id="busuanzi_value_site_uv">0</span>个访客
                </span>
                
                </p>
            </div>
            <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
            <script>
                var now = new Date(); 
                function createtime() { 
                    var grt= new Date("11/1/2019 00:00:00");//此处修改你的建站时间或者网站上线时间 
                    now.setTime(now.getTime()+250); 
                    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
                    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
                    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
                    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
                    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
                    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
                    document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
                    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
                } 
            setInterval("createtime()",250);
            </script>
            <div class="level-end">
            
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" title="Creative Commons" href="https://creativecommons.org/">
                        
                        <i class="fab fa-creative-commons"></i>
                        
                    </a>
                </p>
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/">
                        
                        <i class="fab fa-creative-commons-by"></i>
                        
                    </a>
                </p>
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" title="Download on GitHub" href="https://github.com/lvdongxu/hexo-theme-icarus">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                </p>
                
                </div>
            
            </div>
        </div>
    </div>
</footer>


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>

<script>
var IcarusThemeSettings = {
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>



    
    
<script src="/blog/js/animation.js"></script>

    
    
<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/blog/js/gallery.js" defer></script>

    
    
<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/" target="_blank" rel="noopener">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>

    
    <script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>
    
    
    
    
    


<script src="/blog/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/blog/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/blog/js/insight.js" defer></script>
<link rel="stylesheet" href="/blog/css/search.css">
<link rel="stylesheet" href="/blog/css/insight.css">
    
   
<script src="/blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>